<template>
  <div class="main">
    <!-- 头部 -->
    <header>
      <h1>数据可视化-Echarts</h1>
      <div class="showTime">加载中...</div>
    </header>
    <!-- 页面主体盒子 -->
    <section class="mainbox">
      <!-- 左侧 -->
      <div class="column">
        <div class="panel bar">
          <h2>柱形图-维修类型</h2>
          <div class="chart" id="colum1"></div>
          <div class="panel-footer"></div>
        </div>
        <div class="panel line">
          <h2>折线图-报修变化</h2>
          <div class="chart"></div>
          <div class="panel-footer"></div>
        </div>
        <div class="panel pie">
          <h2>饼状图-年级分布</h2>
          <div class="chart"></div>
          <div class="panel-footer"></div>
        </div>
      </div>
      <!-- 中间 -->
      <div class="column">
        <div class="no">
          <div class="no-hd">
            <ul>
              <li>{{ repairBillCount }}</li>
              <li>{{ repairmanCount }}</li>
            </ul>
          </div>
          <div class="no-bd">
            <ul>
              <li>累计维修次数</li>
              <li>当前维修员人数</li>
            </ul>
          </div>
        </div>
        <div class="map">
          <div class="map1"></div>
          <div class="map2"></div>
          <div class="map3"></div>
          <div class="chart"></div>
        </div>
      </div>
      <!-- 右侧 -->
      <div class="column">
        <div class="panel bar2">
          <h2>柱形图-维修状态</h2>
          <div class="chart"></div>
          <div class="panel-footer"></div>
        </div>
        <div class="panel line2">
          <h2>折线图-学生宿舍</h2>
          <div class="chart"></div>
          <div class="panel-footer"></div>
        </div>
        <div class="panel pie2">
          <h2>饼状图-地区分布</h2>
          <div class="chart"></div>
          <div class="panel-footer"></div>
        </div>
      </div>
    </section>
  </div>
</template>

<script>
import * as echarts from "echarts";

export default {
  data() {
    return {
      repairBillCount: 0,
      repairmanCount: 0,
      leftone: {},
    };
  },
  methods: {
    async getCount() {
      const { data: res } = await this.$http.get("getRepairmanCount");
      this.repairmanCount = res.data;

      const { data: res1 } = await this.$http.get(
        "repairbill/getRepairBillCount"
      );
      this.repairBillCount = res1.data;
    },

    // 柱状图模块1
    async getLeftOne() {
      const { data: res } = await this.$http.get("repairbill/getCountAndType");
      this.leftone = res.data;

      // 1实例化对象
      var myChart = echarts.init(document.querySelector(".bar .chart"));
      // 2. 指定配置项和数据
      var option = {
        color: ["#2f89cf"],
        tooltip: {
          trigger: "axis",
          axisPointer: {
            // 坐标轴指示器，坐标轴触发有效
            type: "shadow", // 默认为直线，可选为：'line' | 'shadow'
          },
        },
        // 修改图表的大小
        grid: {
          left: "0%",
          top: "10px",
          right: "0%",
          bottom: "4%",
          containLabel: true,
        },
        xAxis: [
          {
            type: "category",
            data: res.data.types,
            axisTick: {
              alignWithLabel: true,
            },
            // 修改刻度标签 相关样式
            axisLabel: {
              color: "rgba(255,255,255,.6) ",
              fontSize: "12",
            },
            // 不显示x坐标轴的样式
            axisLine: {
              show: false,
            },
          },
        ],
        yAxis: [
          {
            type: "value",
            // 修改刻度标签 相关样式
            axisLabel: {
              color: "rgba(255,255,255,.6) ",
              fontSize: 12,
            },
            // y轴的线条改为了 2像素
            axisLine: {
              lineStyle: {
                color: "rgba(255,255,255,.1)",
                width: 2,
              },
            },
            // y轴分割线的颜色
            splitLine: {
              lineStyle: {
                color: "rgba(255,255,255,.1)",
              },
            },
          },
        ],
        series: [
          {
            name: "总次数",
            type: "bar",
            barWidth: "35%",
            data: res.data.counts,
            itemStyle: {
              // 修改柱子圆角
              borderRadius: 5,
            },
          },
        ],
      };
      // 3. 把配置项给实例对象
      myChart.setOption(option);
      // 4. 让图表跟随屏幕自动的去适应
      window.addEventListener("resize", function () {
        myChart.resize();
      });
    },
    // 柱状图2
    async getRightOne() {
      const { data: res } = await this.$http.get(
        "/repairbill/getAllCountAndState"
      );

      var myColor = ["#1089E7", "#F57474", "#56D0E3", "#F8B448", "#8B78F6"];
      // 1. 实例化对象
      var myChart = echarts.init(document.querySelector(".bar2 .chart"));
      // 2. 指定配置和数据
      var option = {
        grid: {
          top: "10%",
          left: "22%",
          bottom: "10%",
          // containLabel: true
        },
        // 不显示x轴的相关信息
        xAxis: {
          show: false,
        },
        yAxis: [
          {
            type: "category",
            inverse: true,
            data: res.data.states,
            // 不显示y轴的线
            axisLine: {
              show: false,
            },
            // 不显示刻度
            axisTick: {
              show: false,
            },
            // 把刻度标签里面的文字颜色设置为白色
            axisLabel: {
              color: "#fff",
            },
          },
          {
            data: res.data.counts,
            inverse: true,
            // 不显示y轴的线
            axisLine: {
              show: false,
            },
            // 不显示刻度
            axisTick: {
              show: false,
            },
            // 把刻度标签里面的文字颜色设置为白色
            axisLabel: {
              color: "#fff",
            },
          },
        ],
        series: [
          {
            name: "条",
            type: "bar",
            data: res.data.percents,
            yAxisIndex: 0,
            // 修改第一组柱子的圆角
            itemStyle: {
              borderRadius: 20,
              // 此时的color 可以修改柱子的颜色
              color: function (params) {
                // params 传进来的是柱子对象,dataIndex 是当前柱子的索引号
                return myColor[params.dataIndex];
              },
            },
            // 柱子之间的距离
            barCategoryGap: 100,
            //柱子的宽度
            barWidth: 10,
            // 显示柱子内的文字
            label: {
              show: true,
              position: ["50%", "0%"],
              // {c} 会自动的解析为 数据  data里面的数据
              formatter: "{c}%",
            },
          },
          {
            name: "框",
            type: "bar",
            barCategoryGap: 50,
            barWidth: 15,
            yAxisIndex: 1,
            data: [100, 100, 100, 100, 100, 100],
            itemStyle: {
              color: "none",
              borderColor: "#00c1de",
              borderWidth: 3,
              barBorderRadius: 15,
            },
          },
        ],
      };

      // 3. 把配置给实例对象
      myChart.setOption(option);
      // 4. 让图表跟随屏幕自动的去适应
      window.addEventListener("resize", function () {
        myChart.resize();
      });
    },

    async getleftTwo() {
      const { data: res } = await this.$http.get(
        "/repairbill/getOneYearCountChange"
      );
      var myChart = echarts.init(document.querySelector(".line .chart"));
      var option = {
        // 通过这个color修改两条线的颜色
        color: ["#00f2f1", "#ed3f35"],
        tooltip: {
          trigger: "axis",
        },
        legend: {
          // 如果series 对象有name 值，则 legend可以不用写data
          // 修改图例组件 文字颜色
          axisName: {
            color: "#4c9bfd",
          },
          // 这个10% 必须加引号
          right: "10%",
        },
        grid: {
          top: "20%",
          left: "3%",
          right: "4%",
          bottom: "3%",
          show: true, // 显示边框
          borderColor: "#012f4a", // 边框颜色
          containLabel: true, // 包含刻度文字在内
        },
        xAxis: {
          type: "category",
          boundaryGap: false,
          data: res.data.mouths,
          // 去除刻度线
          axisTick: {
            show: false,
          },
          // 修改x轴上的文字
          axisLabel: {
            color: "#4c9bfd",
          },
          // 去除x轴
          axisLine: {
            show: false,
          },
        },
        yAxis: {
          type: "value",
          // 去除刻度线
          axisTick: {
            show: false,
          },
          // 修改y轴上的文字
          axisLabel: {
            color: "#4c9bfd",
          },
          // 去除y轴
          axisLine: {
            show: false,
          },
          // y轴分割线的颜色
          splitLine: {
            lineStyle: {
              color: "#012f4a",
            },
          },
        },
        series: [
          {
            name: "报修总数",
            type: "line",
            // true 可以让我们的折线显示带有弧度
            smooth: true,
            data: res.data.counts,
          },
        ],
      };
      myChart.setOption(option);
      // 4. 让图表跟随屏幕自动的去适应
      window.addEventListener("resize", function () {
        myChart.resize();
      });
    },

    async getRightTwo() {
      const { data: res } = await this.$http.get(
        "/repairbill/getOneYearSouthAndNotrhCountChange"
      );

      var myChart = echarts.init(document.querySelector(".line2 .chart"));
      var option = {
        tooltip: {
          trigger: "axis",
        },
        legend: {
          top: "0%",
          data: ["南区宿舍", "北区宿舍"],
          axisName: {
            color: "rgba(255,255,255,.5)",
            fontSize: "12",
          },
        },

        grid: {
          left: "10",
          top: "30",
          right: "18",
          bottom: "10",
          containLabel: true,
        },
        xAxis: [
          {
            type: "category",
            boundaryGap: false,
            // x轴更换数据
            data: res.data.years,
            // 文本颜色为rgba(255,255,255,.6)  文字大小为 12
            axisLabel: {
              axisName: {
                color: "rgba(255,255,255,.6)",
                fontSize: 12,
              },
            },
            // x轴线的颜色为   rgba(255,255,255,.2)
            axisLine: {
              lineStyle: {
                color: "rgba(255,255,255,.2)",
              },
            },
          },
        ],
        yAxis: [
          {
            type: "value",
            axisTick: { show: false },
            axisLine: {
              lineStyle: {
                color: "rgba(255,255,255,.1)",
              },
            },
            axisLabel: {
              axisName: {
                color: "rgba(255,255,255,.6)",
                fontSize: 12,
              },
            },
            // 修改分割线的颜色
            splitLine: {
              lineStyle: {
                color: "rgba(255,255,255,.1)",
              },
            },
          },
        ],
        series: [
          {
            name: "南区宿舍",
            type: "line",
            smooth: true,
            // 单独修改当前线条的样式
            lineStyle: {
              color: "#0184d5",
              width: "2",
            },
            // 填充颜色设置
            areaStyle: {
              color: new echarts.graphic.LinearGradient(
                0,
                0,
                0,
                1,
                [
                  {
                    offset: 0,
                    color: "rgba(1, 132, 213, 0.4)", // 渐变色的起始颜色
                  },
                  {
                    offset: 0.8,
                    color: "rgba(1, 132, 213, 0.1)", // 渐变线的结束颜色
                  },
                ],
                false
              ),
              shadowColor: "rgba(0, 0, 0, 0.1)",
            },
            // 设置拐点
            symbol: "circle",
            // 拐点大小
            symbolSize: 8,
            // 开始不显示拐点， 鼠标经过显示
            showSymbol: false,
            // 设置拐点颜色以及边框
            itemStyle: {
              color: "#0184d5",
              borderColor: "rgba(221, 220, 107, .1)",
              borderWidth: 12,
            },
            data: res.data.southcounts,
          },
          {
            name: "北区宿舍",
            type: "line",
            smooth: true,
            lineStyle: {
              normal: {
                color: "#00d887",
                width: 2,
              },
            },
            areaStyle: {
              normal: {
                color: new echarts.graphic.LinearGradient(
                  0,
                  0,
                  0,
                  1,
                  [
                    {
                      offset: 0,
                      color: "rgba(0, 216, 135, 0.4)",
                    },
                    {
                      offset: 0.8,
                      color: "rgba(0, 216, 135, 0.1)",
                    },
                  ],
                  false
                ),
                shadowColor: "rgba(0, 0, 0, 0.1)",
              },
            },
            // 设置拐点 小圆点
            symbol: "circle",
            // 拐点大小
            symbolSize: 5,
            // 设置拐点颜色以及边框
            itemStyle: {
              color: "#00d887",
              borderColor: "rgba(221, 220, 107, .1)",
              borderWidth: 12,
            },
            // 开始不显示拐点， 鼠标经过显示
            showSymbol: false,
            data: res.data.northcounts,
          },
        ],
      };
      myChart.setOption(option);
      // 4. 让图表跟随屏幕自动的去适应
      window.addEventListener("resize", function () {
        myChart.resize();
      });
    },

    async getRightThree() {
      const { data: res } = await this.$http.get(
        "/repairbill/selectCountFromGroupBuilding"
      );

      var myChart = echarts.init(document.querySelector(".pie2 .chart"));
      var option = {
        color: [
          "#006cff",
          "#60cda0",
          "#ed8884",
          "#ff9f7f",
          "#0096ff",
          "#9fe6b8",
          "#32c5e9",
          "#1d9dff",
        ],
        tooltip: {
          trigger: "item",
          formatter: "{a} <br/>{b} : {c} ({d}%)",
        },
        // legend: {
        //   bottom: "0%",
        //   itemWidth: 10,
        //   itemHeight: 10,
        //   textStyle: {
        //     color: "rgba(255,255,255,.5)",
        //     fontSize: "12",
        //   },
        // },
        series: [
          {
            name: "地区分布",
            type: "pie",
            radius: ["10%", "70%"],
            center: ["50%", "50%"],
            roseType: "radius",
            // 图形的文字标签
            label: {
              fontSize: 11,
            },
            // 链接图形和文字的线条
            labelLine: {
              // length 链接图形的线条
              length: 6,
              // length2 链接文字的线条
              length2: 8,
            },
            data: res.data,
          },
        ],
      };
      myChart.setOption(option);
      // 监听浏览器缩放，图表对象调用缩放resize函数
      window.addEventListener("resize", function () {
        myChart.resize();
      });
    },

    async getLeftThree() {
      const { data: res } = await this.$http.get(
        "/repairbill/getCountFromGroupGrade"
      );

      // 1. 实例化对象
      var myChart = echarts.init(document.querySelector(".pie .chart"));
      // 2.指定配置
      var option = {
        color: ["#065aab", "#066eab", "#0682ab", "#0696ab", "#06a0ab"],
        tooltip: {
          trigger: "item",
          formatter: "{a} <br/>{b}: {c} ({d}%)",
        },

        legend: {
          bottom: "0%",
          // 修改小图标的大小
          itemWidth: 10,
          itemHeight: 10,
          // 修改图例组件的文字为 12px
          textStyle: {
            color: "rgba(255,255,255,.5)",
            fontSize: "12",
          },
        },
        series: [
          {
            name: "年级分布",
            type: "pie",
            // 这个radius可以修改饼形图的大小
            // radius 第一个值是内圆的半径 第二个值是外圆的半径
            radius: ["40%", "60%"],
            center: ["50%", "45%"],
            avoidLabelOverlap: false,
            // 图形上的文字
            label: {
              show: false,
              position: "center",
            },
            // 链接文字和图形的线是否显示
            labelLine: {
              show: false,
            },
            data: res.data,
          },
        ],
      };

      // 3. 把配置给实例对象
      myChart.setOption(option);
      // 4. 让图表跟随屏幕自动的去适应
      window.addEventListener("resize", function () {
        myChart.resize();
      });
    },
  },
  created() {
    this.getCount();

    this.getLeftOne();

    this.getRightOne();

    this.getleftTwo();

    this.getRightTwo();

    this.getLeftThree();

    this.getRightThree();

    //时间
    var t = null;
    t = setTimeout(time, 1000); //開始运行
    function time() {
      clearTimeout(t); //清除定时器
      const dt = new Date();
      var y = dt.getFullYear();
      var mt = dt.getMonth() + 1;
      var day = dt.getDate();
      var h = dt.getHours(); //获取时
      var m = dt.getMinutes(); //获取分
      var s = dt.getSeconds(); //获取秒
      document.querySelector(".showTime").innerHTML =
        "当前时间：" +
        y +
        "年" +
        mt +
        "月" +
        day +
        "-" +
        h +
        "时" +
        m +
        "分" +
        s +
        "秒";
      t = setTimeout(time, 1000); //设定定时器，循环运行
    }
    //时间
  },
  mounted() {},
};
</script>

<style scoped>
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.main {
  /* background: url("../../assets/images/bg.jpg") no-repeat top center; */
  background-color: rgb(16, 12, 42);
  line-height: 1.15;
  min-width: 724px;
  max-width: 1365px;
  height: 563.5px;
  margin-left: -0.48rem;
  margin-top: -0.48rem;
}

li {
  list-style: none;
}

@font-face {
  font-family: electronicFont;
  src: url(../../assets/fonts/DS-DIGIT.TTF);
}

header {
  height: 1.25rem;
  /* background: url("../../assets/images/head_bg.png") no-repeat; */
  background-size: 100% 100%;
  position: relative;
}

header h1 {
  font-size: 0.475rem;
  color: #fff;
  line-height: 1rem;
  text-align: center;
}
header .showTime {
  position: absolute;
  top: 0;
  right: 0.375rem;
  line-height: 0.9375rem;
  font-size: 0.25rem;
  color: rgba(255, 255, 255, 0.7);
}

.mainbox {
  display: flex;
  min-width: 724px;
  max-width: 1365px;
  margin: 0 auto;
  padding: 0.125rem;
  padding-bottom: 0;
}
.mainbox .column {
  flex: 3;
}
.mainbox .column:nth-child(2) {
  flex: 5;
  margin: 0 0.125rem 0.1875rem;
}
.mainbox .panel {
  position: relative;
  height: 3.875rem;
  padding: 0 0.1875rem 0.5rem;
  border: 1px solid rgba(25, 186, 139, 0.17);
  margin-bottom: 0.1875rem;
  background: url(../../assets/images/line.png) rgba(255, 255, 255, 0.03);
}
.mainbox .panel::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  border-left: 2px solid #02a6b5;
  border-top: 2px solid #02a6b5;
  width: 10px;
  height: 10px;
}
.mainbox .panel::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  border-right: 2px solid #02a6b5;
  border-top: 2px solid #02a6b5;
  width: 10px;
  height: 10px;
}
.mainbox .panel .panel-footer {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
}
.mainbox .panel .panel-footer::before {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  border-left: 2px solid #02a6b5;
  border-bottom: 2px solid #02a6b5;
  width: 10px;
  height: 10px;
}
.mainbox .panel .panel-footer::after {
  content: "";
  position: absolute;
  bottom: 0;
  right: 0;
  border-right: 2px solid #02a6b5;
  border-bottom: 2px solid #02a6b5;
  width: 10px;
  height: 10px;
}
.mainbox .panel h2 {
  height: 0.6rem;
  color: #fff;
  line-height: 0.6rem;
  text-align: center;
  font-size: 0.25rem;
  font-weight: normal;
}
.mainbox .panel .chart {
  height: 3rem;
}

.no {
  background-color: rgba(101, 132, 226, 0.1);
  padding: 0.1875rem;
}
.no .no-hd {
  position: relative;
  border: 1px solid rgba(25, 186, 139, 0.17);
}
.no .no-hd::before {
  position: absolute;
  top: 0;
  left: 0;
  content: "";
  width: 30px;
  height: 10px;
  border-top: 2px solid #02a6b5;
  border-left: 2px solid #02a6b5;
}
.no .no-hd::after {
  position: absolute;
  bottom: 0;
  right: 0;
  content: "";
  width: 30px;
  height: 10px;
  border-right: 2px solid #02a6b5;
  border-bottom: 2px solid #02a6b5;
}
.no .no-hd ul {
  display: flex;
}
.no .no-hd ul li {
  flex: 1px;
  height: 1rem;
  font-size: 0.875rem;
  color: #ffeb7b;
  text-align: center;
  font-family: electronicFont;
  position: relative;
}
.no .no-hd ul li:nth-child(1)::after {
  content: "";
  position: absolute;
  top: 25%;
  right: 0;
  height: 50%;
  width: 1px;
  background: rgba(255, 255, 255, 0.2);
}
.no .no-bd ul {
  display: flex;
}
.no .no-bd ul li {
  flex: 1;
  text-align: center;
  color: rgba(255, 255, 255, 0.7);
  font-size: 0.225rem;
  height: 0.5rem;
  line-height: 0.5rem;
  padding-top: 0.125rem;
}

.map {
  height: 10.125rem;
  position: relative;
  overflow: hidden;
}
.map .map1 {
  width: 6.475rem;
  height: 6.475rem;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-size: 100% 100%;
  opacity: 0.3;
  background-image: url("../../assets/images/map.png");
}
.map .map2 {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 8.0375rem;
  height: 8.0375rem;
  background: url(../../assets/images/lbx.png);
  animation: rotate1 15s linear infinite;
  opacity: 0.6;
  background-size: 100% 100%;
}
.map .map3 {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 7.075rem;
  height: 7.075rem;
  background: url(../../assets/images/jt.png);
  animation: rotate2 10s linear infinite;
  opacity: 0.6;
  background-size: 100% 100%;
}
.map .chart {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 10.125rem;
}
@keyframes rotate1 {
  form {
    transform: translate(-50%, -50%) rotate(0deg);
  }
  to {
    transform: translate(-50%, -50%) rotate(360deg);
  }
}
@keyframes rotate2 {
  form {
    transform: translate(-50%, -50%) rotate(0deg);
  }
  to {
    transform: translate(-50%, -50%) rotate(-360deg);
  }
}

@media screen and (max-width: 1024px) {
  html {
    font-size: 42px !important;
  }
}
@media screen and (min-width: 1920px) {
  html {
    font-size: 80px !important;
  }
}
</style>
